<template>
  <div class="dictItem">
    <div class="back">
      <a class="back-text" @click="back"><a-icon type="left" />返回</a>
      <div class="back-title">
        <div class="back-title-icon"><a-icon type="file-text" :style="{color: '#fff',fontsize: '14px'}" /></div>
        <span>字典项列表</span>
      </div>
    </div>
    <div class="table-box">
      <div class="table-operation">
        <a-button type="primary" @click="addDictItem" icon="plus" v-if="QX.add">新增</a-button>
      </div>
      <a-table
        :loading="loading"
        rowKey="dicValue"
        :columns="innerColumns"
        :data-source="itemList"
        :pagination="false"
        :scroll="{y: this.$getViewportSize().height-295 }"
      >
      <span slot="operation" slot-scope="text,record">
        <a @click="editDictItem(record)" v-if="QX.edit"><a-icon class="iconBtn" type="edit" />编辑</a>
        <a-divider v-if="QX.edit && QX.delete" type="vertical"/>
        <a-popconfirm
          title="确认是否删除？"
          ok-text="是"
          cancel-text="否"
          @confirm="removeDictItem(record)"
        >
          <a v-if="QX.delete"><a-icon class="iconBtn" type="delete"/>删除</a>
        </a-popconfirm>
      </span>
      </a-table>
    </div>
    <a-drawer
      :closable="true"
      :title="itemTitle"
      :width="550"
      :visible="itemVisible"
      @close="itemVisible=!itemVisible">
      <a-spin class="submitLoading" :spinning="submitLoading">
        <a-form-model :model="itemForm" :label-col="labelCol" :wrapper-col="wrapperCol" :rules="itemRules" ref="itemForm" class="lay-drawer-form" >
          <a-form-model-item label="字典类型" prop="dicNo">
            <a-input v-model="dicNo" disabled/>
          </a-form-model-item>
          <a-form-model-item label="字典项名" prop="dicDisplayName">
            <a-input v-model="itemForm.dicDisplayName" placeholder="请输入字典项名" :maxLength="100"/>
          </a-form-model-item>
          <a-form-model-item label="字典项值" prop="newDicValue">
            <a-input v-model="itemForm.newDicValue" placeholder="请输入字典项值" :maxLength="50"/>
          </a-form-model-item>
          <a-form-model-item label="字典项扩展1" prop="dicExtend1">
            <a-input-number v-model="itemForm.dicExtend1" :min="0" :max="999999" :precision="3" style="width: 100%"/>
          </a-form-model-item>
          <a-form-model-item label="字典项扩展2" prop="dicExtend2">
            <a-input v-model="itemForm.dicExtend2" placeholder="请输入字典项扩展2" :maxLength="20"/>
          </a-form-model-item>
          <a-form-model-item label="字典项扩展3" prop="dicExtend3">
            <a-input v-model="itemForm.dicExtend3" placeholder="请输入字典项扩展3" :maxLength="20"/>
          </a-form-model-item>
          <a-form-model-item label="字典项扩展4" prop="dicExtend4">
            <a-input v-model="itemForm.dicExtend4" placeholder="请输入字典项扩展4" :maxLength="20"/>
          </a-form-model-item>
        </a-form-model>
        <div
          :style="{
          position: 'absolute',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '8px 16px',
          background: '#fff',
          textAlign: 'right',
          zIndex: 1,
        }">
          <a-button
            type="default"
            @click="itemVisible=!itemVisible"
          >
            取消
          </a-button>
          <a-button
            type="primary"
            @click="submitFormItem"
          >
            确认
          </a-button>
        </div>
      </a-spin>
    </a-drawer>
  </div>
</template>

<script>
import {req} from "../../../api/axiosFun";
import preventBack from 'vue-prevent-browser-back';
export default {
  name: "DictItem",
  mixins: [preventBack],//注入
  data() {
    return {
      QX: {},
      dicNo: '',
      itemForm: {
        dicNo: '',
        dicValue: '',
        newDicValue: '',
        dicDisplayName: '',
        dicExtend1: 0,
        dicExtend2: '',
        dicExtend3: '',
        dicExtend4: ''
      },
      title: '',
      itemTitle: '',
      itemVisible: false,
      disabled: false,
      itemList: [],
      innerColumns,
      itemRules,
      loading: false,
      submitLoading: false,
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      labelCol: {span: 5},
      wrapperCol: {span: 19},
    }
  },
  watch: {
    itemVisible: function (newVal, oldVal) {
      if (!newVal) {
        this.restForm('itemForm');
        this.itemForm = this.$options.data().itemForm;
        this.itemForm.dicValue = '';
      }
    },
    "$store.state.inspectQX":{
      deep:true,//深度监听设置为 true
      handler:function(newVal,oldVal){
        this.QX = newVal
      }
    },
  },
  mounted() {
    this.QX = this.$store.state.inspectQX
    this.dicNo = this.$route.query.dicNo
    this.itemForm.dicNo = this.dicNo
    this.getDictItemByNo(this.dicNo)
  },
  methods: {
    back() {
      this.$router.push('/dict')
    },
    /* 删除字典项 */
    removeDictItem(record) {
      this.loading = true
      req('post', '/dict/removeDictItem', {
        dicNo: record.dicNo,
        dicValue: record.dicValue
      }).then(res => {
        this.loading = false
        if (res.result === 'success') {
          this.$message.success(res.message);
          this.getDictItemByNo(record.dicNo)
        }
      });
    },
    /* 添加字典项 */
    addDictItem() {
      this.itemVisible = true;
      this.itemTitle = '新增字典项';
    },
    /* 修改字典项 */
    editDictItem(record) {
      this.itemTitle = '修改字典项';
      this.loading = true
      req('post', '/dict/getDictItemByNoAndValue', {
        dicNo: record.dicNo,
        dicValue: record.dicValue
      }).then(res => {
        this.loading = false
        if (res.result === 'success') {
          this.itemVisible = true;
          this.$nextTick(() => {
            this.itemForm.dicNo = res.data.dicNo;
            this.itemForm.dicValue = res.data.dicValue;
            this.itemForm.newDicValue = res.data.dicValue;
            this.itemForm.dicDisplayName = res.data.dicDisplayName;
            this.itemForm.dicExtend1 = res.data.dicExtend1 || 0;
            this.itemForm.dicExtend2 = res.data.dicExtend2 || '';
            this.itemForm.dicExtend3 = res.data.dicExtend3 || '';
            this.itemForm.dicExtend4 = res.data.dicExtend4 || '';
          })
        }
      });
    },
    /* 字典项提交表单 */
    submitFormItem() {
      this.$refs.itemForm.validate(valid => {
        if (valid) {
          const url = this.itemTitle === '新增字典项' ? 'addDictItem' : 'updateDictItem';
          this.itemForm.dicNo = this.dicNo
          this.submitLoading = true
          req("post", `/dict/${url}`, this.itemForm).then(res => {
            if (res.result === 'success') {
              this.itemVisible = false;
              this.$message.success(res.message);
              this.getDictItemByNo(this.dicNo)
            }
            this.submitLoading = false
          });
        }
      });
    },
    /* 重置表单 */
    restForm(form) {
      this.$refs[form].resetFields();
    },
    getDictItemByNo(dicNo){
      this.loading = true
      req("post", 'dict/getDictItemByNo', {
        dicNo
      }).then(res => {
        this.loading = false
        if (res.result === 'success') {
          this.itemList = res.data
        }
      });
    },
  }
}

const itemRules = {
  newDicValue: [
    {required: true, message: '请输入字典项值', trigger: 'blur'},
  ],
  dicDisplayName: [
    {required: true, message: '请输入字典项名', trigger: 'blur'},
  ]
};
const innerColumns = [
  {title: '字典项名', dataIndex: 'dicDisplayName', key: 'dicDisplayName'},
  {title: '字典项值', dataIndex: 'dicValue', key: 'dicValue'},
  {
    title: '操作',
    width: 150,
    dataIndex: 'operation',
    key: 'operation',
    align: 'center',
    scopedSlots: {customRender: 'operation'},
  },
];
</script>

<style scoped>
@import "../../../assets/css/maincss.css";
/deep/ .ant-table-tbody >tr.ant-table-expanded-row-level-1>td {
  padding: 0 0 2px 0;
}
.dictItem {
  background: none;
  padding: 0 0;
}
.table-box {
  margin-top: 10px;
  padding: 16px 16px 25px;
  background: #fff;
}
</style>
